<template>
  <!-- 根容器，使用Element UI标准的app-container样式 -->
  <div class="app-container">
    <!-- 搜索表单：
         - :inline="true"开启行内布局（表单元素横向排列）
         - :model="queryParams"绑定查询参数对象
         - ref="queryRef"用于表单引用（重置等操作）
         - label-width="80px"统一表单标签宽度 -->
    <el-form :inline="true" :model="queryParams" ref="queryRef" label-width="80px">
      <!-- 工号查询项：
           - v-model绑定queryParams.staffNo（工号）
           - placeholder提示文本
           - clearable提供清空按钮
           - @keyup.enter.native绑定回车事件，触发搜索 -->
      <el-form-item label="工号">
        <el-input v-model="queryParams.staffNo" placeholder="工号" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <!-- 姓名查询项：同上，绑定queryParams.name（姓名） -->
      <el-form-item label="姓名">
        <el-input v-model="queryParams.name" placeholder="姓名" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <!-- 职位查询项：同上，绑定queryParams.position（职位） -->
      <el-form-item label="职位">
        <el-input v-model="queryParams.position" placeholder="职位" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <!-- 状态查询项（下拉选择）：
           - v-model绑定queryParams.status（状态值）
           - 选项为"在职"（值0）和"离职"（值1） -->
      <el-form-item label="状态">
        <el-select v-model="queryParams.status" placeholder="状态" clearable>
          <el-option label="在职" value="0" />
          <el-option label="离职" value="1" />
        </el-select>
      </el-form-item>
      <!-- 搜索/重置按钮组：
           - 搜索按钮：primary类型（蓝色），带搜索图标，点击触发handleQuery
           - 重置按钮：默认类型，带刷新图标，点击触发resetQuery -->
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 功能按钮行：
         - :gutter="10"设置列之间的间距
         - class="mb8"自定义底部边距（8px） -->
    <el-row :gutter="10" class="mb8">
      <!-- 新增按钮：
           - :span="1.5"设置列宽度占比
           - type="primary"蓝色按钮，plain（镂空样式）
           - icon="el-icon-plus"加号图标，size="mini"小尺寸
           - @click="handleAdd"点击触发新增
           - v-hasPermi="['jiaxiao:staff:add']"权限控制（仅拥有该权限可见） -->
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['jiaxiao:staff:add']">新增</el-button>
      </el-col>
      <!-- 修改按钮：
           - type="success"绿色按钮
           - :disabled="single"控制禁用（single=true表示未单选，禁用按钮）
           - 权限控制：jiaxiao:staff:edit -->
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['jiaxiao:staff:edit']">修改</el-button>
      </el-col>
      <!-- 删除按钮：
           - type="danger"红色按钮
           - :disabled="multiple"控制禁用（multiple=true表示未选择任何数据，禁用按钮）
           - 权限控制：jiaxiao:staff:remove -->
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['jiaxiao:staff:remove']">删除</el-button>
      </el-col>
      <!-- 导出按钮（注释状态，未启用） -->
      <!-- <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['jiaxiao:staff:export']">导出</el-button>
      </el-col> -->
      <!-- 右侧工具栏：
           - :showSearch.sync双向绑定搜索区域显示状态
           - @queryTable="getList"触发表格重新查询 -->
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <!-- 职工列表表格：
         - v-loading="loading"加载状态（loading=true时显示加载动画）
         - :data="list"绑定表格数据源（职工列表）
         - @selection-change="handleSelectionChange"监听多选框选择事件 -->
    <el-table v-loading="loading" :data="list" @selection-change="handleSelectionChange">
      <!-- 多选列：width="55"固定宽度，align="center"居中对齐 -->
      <el-table-column type="selection" width="55" align="center" />
      <!-- 工号列：label列标题，prop绑定staffNo字段，width="120"固定宽度 -->
      <el-table-column label="工号" prop="staffNo" width="120" />
      <!-- 姓名列：绑定name字段 -->
      <el-table-column label="姓名" prop="name" width="120" />
      <!-- 性别列：绑定gender字段 -->
      <el-table-column label="性别" prop="gender" width="80" />
      <!-- 职位列：绑定position字段 -->
      <el-table-column label="职位" prop="position" width="120" />
      <!-- 电话列：绑定phone字段 -->
      <el-table-column label="电话" prop="phone" width="140" />
      <!-- 状态列：绑定status字段 -->
      <el-table-column label="状态" prop="status" width="100" />
      <!-- 入职日期列：绑定entryDate字段 -->
      <el-table-column label="入职日期" prop="entryDate" width="140" />
      <!-- 操作列：
           - fixed="right"固定在右侧
           - width="200"固定宽度
           - 包含修改和删除按钮 -->
      <el-table-column label="操作" fixed="right" width="200">
        <template slot-scope="scope">
          <!-- 修改按钮：文本类型，点击传当前行数据 -->
          <el-button size="mini" type="text" @click="handleUpdate(scope.row)" v-hasPermi="['jiaxiao:staff:edit']">修改</el-button>
          <!-- 删除按钮：红色文本，点击传当前行数据 -->
          <el-button size="mini" type="text" class="text-danger" @click="handleDelete(scope.row)" v-hasPermi="['jiaxiao:staff:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件：
         - v-show="total>0"总条数>0时显示分页
         - :total="total"绑定总条数
         - :page.sync双向绑定当前页码（queryParams.pageNum）
         - :limit.sync双向绑定每页条数（queryParams.pageSize）
         - @pagination="getList"页码变化时触发重新查询 -->
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

    <!-- 新增/修改职工对话框：
         - :title="title"绑定对话框标题（新增/修改）
         - :visible.sync双向绑定显示状态（open）
         - width="600px"固定对话框宽度 -->
    <el-dialog :title="title" :visible.sync="open" width="600px">
      <!-- 表单：
           - ref="formRef"表单引用
           - :model="form"绑定表单数据对象
           - label-width="100px"统一标签宽度 -->
      <el-form ref="formRef" :model="form" label-width="100px">
        <!-- 工号输入项：绑定form.staffNo -->
        <el-form-item label="工号">
          <el-input v-model="form.staffNo" />
        </el-form-item>
        <!-- 姓名输入项：绑定form.name -->
        <el-form-item label="姓名">
          <el-input v-model="form.name" />
        </el-form-item>
        <!-- 性别下拉项：绑定form.gender，选项男（M）/女（F） -->
        <el-form-item label="性别">
          <el-select v-model="form.gender">
            <el-option label="男" value="M" />
            <el-option label="女" value="F" />
          </el-select>
        </el-form-item>
        <!-- 职位输入项：绑定form.position -->
        <el-form-item label="职位">
          <el-input v-model="form.position" />
        </el-form-item>
        <!-- 电话输入项：绑定form.phone -->
        <el-form-item label="电话">
          <el-input v-model="form.phone" />
        </el-form-item>
        <!-- 住址输入项：绑定form.address -->
        <el-form-item label="住址">
          <el-input v-model="form.address" />
        </el-form-item>
        <!-- 身份证号输入项：绑定form.idCard -->
        <el-form-item label="身份证号">
          <el-input v-model="form.idCard" />
        </el-form-item>
        <!-- 入职日期选择项：
             - type="date"日期类型
             - value-format="yyyy-MM-dd"设置日期格式
             - placeholder提示文本 -->
        <el-form-item label="入职日期">
          <el-date-picker v-model="form.entryDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" />
        </el-form-item>
        <!-- 状态下拉项：绑定form.status，选项在职（0）/离职（1） -->
        <el-form-item label="状态">
          <el-select v-model="form.status">
            <el-option label="在职" value="0" />
            <el-option label="离职" value="1" />
          </el-select>
        </el-form-item>
        <!-- 备注输入项：textarea多行文本框，绑定form.remark -->
        <el-form-item label="备注">
          <el-input v-model="form.remark" type="textarea" />
        </el-form-item>
      </el-form>
      <!-- 对话框底部按钮：取消（关闭对话框）、保存（提交表单） -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="open=false">取消</el-button>
        <el-button type="primary" @click="submitForm">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 导入职工相关API接口：列表查询、单条查询、新增、修改、删除、导出
import { listStaff, getStaff, addStaff, updateStaff, delStaff, exportStaff } from '@/api/jiaxiao/staff'

// 导出组件
export default {
  name: 'JxStaff', // 组件名称
  data() { // 组件数据定义
    return {
      loading: false, // 表格加载状态（true=加载中）
      showSearch: true, // 搜索区域显示状态（true=显示）
      total: 0, // 表格总条数
      list: [], // 表格数据列表
      single: true, // 是否单选（true=未单选/多选，用于控制修改按钮禁用）
      multiple: true, // 是否未选（true=未选择任何数据，用于控制删除按钮禁用）
      ids: [], // 选中的数据ID集合（用于批量操作）
      // 查询参数：页码、页大小、工号、姓名、职位、状态
      queryParams: { pageNum: 1, pageSize: 10, staffNo: undefined, name: undefined, position: undefined, status: undefined },
      title: '', // 新增/编辑对话框标题
      open: false, // 新增/编辑对话框显示状态
      form: {} // 新增/编辑表单数据
    }
  },
  created() { // 组件创建生命周期钩子：页面加载时触发
    this.getList() // 初始化加载职工列表
  },
  methods: { // 组件方法定义
    /** 1. 获取职工列表数据 */
    getList() {
      this.loading = true // 开启加载状态
      // 调用列表查询API，传入查询参数
      listStaff(this.queryParams).then(res => {
        this.list = res.rows // 赋值表格数据（分页数据）
        this.total = res.total // 赋值总条数
        this.loading = false // 关闭加载状态
      })
    },
    /** 2. 搜索按钮触发：重置页码为1，重新查询列表 */
    handleQuery() { this.queryParams.pageNum = 1; this.getList() },
    /** 3. 重置搜索：重置表单字段，重新查询列表 */
    resetQuery() { this.$refs.queryRef && this.$refs.queryRef.resetFields(); this.handleQuery() },
    /** 4. 表格多选事件：更新选中ID集合、单选/未选状态 */
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.staffId) // 提取选中项的ID到ids数组
      this.single = selection.length !== 1 // 若选中1条则single=false（修改按钮启用）
      this.multiple = !selection.length // 若选中>=1条则multiple=false（删除按钮启用）
    },
    /** 5. 新增按钮触发：设置对话框标题、清空表单、打开对话框 */
    handleAdd() { this.title = '新增职工'; this.form = {}; this.open = true },
    /** 6. 修改按钮触发：获取选中行ID，查询单条数据并回显到表单 */
    handleUpdate(row) {
      // 若传入row（表格行点击）则取row.staffId，否则取ids数组第一个（批量选中时）
      const id = row && row.staffId ? row.staffId : this.ids[0]
      // 调用单条查询API，获取数据后回显到表单，设置标题并打开对话框
      getStaff(id).then(({ data }) => { this.form = data; this.title = '编辑职工'; this.open = true })
    },
    /** 7. 新增/编辑保存按钮触发：判断新增/修改，调用对应API */
    submitForm() {
      // 若表单有staffId则为修改（调用updateStaff），否则为新增（调用addStaff）
      const req = this.form.staffId ? updateStaff(this.form) : addStaff(this.form)
      req.then(() => {
        this.$message.success('保存成功') // 显示成功提示
        this.open = false // 关闭对话框
        this.getList() // 重新加载列表
      })
    },
    /** 8. 删除按钮触发：获取选中ID，调用删除API */
    handleDelete(row) {
      // 若传入row则取单行ID，否则取ids数组（批量删除）
      const ids = row && row.staffId ? [row.staffId] : this.ids
      // 显示确认对话框，用户确认后调用删除API
      this.$modal.confirm('确认删除选中记录吗？')
        .then(() => delStaff(ids.join(','))) // 调用删除API（ID用逗号拼接）
        .then(() => {
          this.getList() // 重新加载列表
          this.$message.success('删除成功') // 显示成功提示
        })
    },
    /** 9. 导出按钮触发：调用导出API（注释中，未启用） */
    handleExport() {
      this.$download('/jiaxiao/staff/export', { ...this.queryParams })
    }
  }
}
</script>

<style scoped>
/* 自定义样式：底部边距8px */
.mb8 { margin-bottom: 8px; }
</style>
